/**
 * merge level=30
 */

Ext.define('Jfok.module.chart.ChartPanel', {
			extend : 'Ext.panel.Panel',
			alias : 'widget.chartpanel',
			requires : ['Jfok.module.chart.ColumnChart',
					'Jfok.module.chart.BarChart', 'Jfok.module.chart.LineChart',
					'Jfok.module.chart.PieChart', 'Jfok.module.chart.AreaChart'],
			layout : 'border',
			store : null,
			record : null, // 当前加载的图像方案的 model
			// 是否正在加载一条chart设置记录，如果是的话，那么checkbox的change不执行
			isLoadingRecord : false,
			initComponent : function() {
				// 当前选中的需要显示图表的模块
				this.module = this.grid.module;
				// 如果选了二个以上，那么就用选择的作为数据源
				if (this.grid.getSelectionCount() >= 2)
					this.store = Ext.create('Ext.data.Store', {
								model : this.module.model,
								data : this.grid.getSelection()
							});
				else
					this.store = this.grid.store;
				this.chartModule = Jfok.modules.getModule('_ModuleChart');
				this.chartModel = this.chartModule.model;
				var _module = Jfok.modules.getModule('_Module');
				this.chartStore = Ext.create('Ext.data.Store', {
							panel : this,
							autoLoad : true,
							model : this.chartModel,
							pageSize : 100,
							extraParams : {
								navigates : Ext.encode([{
											moduleName : _module.tf_moduleName,
											tableAsName : _module.tableAsName,
											primarykey : _module.tf_primaryKey,
											fieldtitle : this.module.tf_title,
											equalsValue : this.module.tf_moduleId,
											equalsMethod : null,
											text : this.module.tf_title,
											isCodeLevel : false
										}])
							},
							listeners : {
								beforeload : function(store) {
									for (var i in store.extraParams)
										store.proxy.extraParams[i] = store.extraParams[i];
								},
								load : function(store) {
									for (var i in store.extraParams)
										delete store.proxy.extraParams[i];
									if (store.getCount() > 0) {
										store.panel.setFormData(store.getAt(0));
									}
									store.panel.recreateChart();
								}
							}
						});

				this.listeners = {
					render : function(panel) {
						// panel.chartStore.load();
					}
				}
				this.items = [{
							region : 'west',
							width : 360,
							split : true,
							frame : false,
							border : false,
							collapsible : true,
							collapseMode : 'mini',
							tools : [{
										type : 'save',
										tooltip : '保存图表方案参数'
									}, {
										type : 'plus',
										tooltip : '将当前图表方案另存为一个新的'
									}, {
										type : 'minus',
										tooltip : '删除当前图表方案'
									}],

							xtype : 'form',
							layout : 'fit',
							title : '图表参数设置',
							items : [{
										xtype : 'fieldset',
										title : '图表参数设置',
										layout : 'anchor',
										margin : '5 5 5 5',
										defaults : {
											labelAlign : 'right',
											labelWidth : 65,
											anchor : '100%'
										},
										items : [{
													xtype : 'combo',
													name : 'tf_chartId',
													displayField : 'tf_name',
													valueField : 'tf_chartId',
													fieldLabel : '方案名称',
													editable : false,
													store : this.chartStore
												}, {
													xtype : 'textfield',
													name : 'tf_title',
													fieldLabel : '方案标题',
													maxLength : 50,
													enforceMaxLength : true
												}, {
													xtype : 'categorycombo',
													fieldLabel : '项目内容',
													module : this.module,
													name : 'tf_categoryField'
												}, {
													xtype : 'numericcombo',
													fieldLabel : '数值内容',
													module : this.module,
													name : 'tf_numericFields',
													width : 280
												}, {
													xtype : 'combo',
													forceSelection : true,
													editable : false,
													allowBlank : false,
													displayField : 'title',
													valueField : 'id',
													queryMode : 'local',
													name : 'tf_chartType',
													fieldLabel : '图表类型',
													value : 'columnchart',
													store : Ext.create('Ext.data.Store', {
																fields : ['id', 'title'],
																data : [{
																			id : 'columnchart',
																			title : '柱状图'
																		}, {
																			id : 'barchart',
																			title : '条状图'
																		}, {
																			id : 'linechart',
																			title : '折线图'
																		}, {
																			id : 'piechart',
																			title : '饼状图'
																		}, {
																			id : 'areachart',
																			title : '面积图'
																		}]
															})
												}, {
													xtype : 'combo',
													forceSelection : true,
													editable : false,
													allowBlank : false,
													displayField : 'title',
													valueField : 'id',
													queryMode : 'local',
													name : 'tf_colorScheme',
													fieldLabel : '配色方案',
													value : 'Base',
													store : Ext.create('Ext.data.Store', {
																fields : ['id', 'title'],
																data : [{
																			id : 'Base',
																			title : '默认'
																		}, {
																			id : 'Sky',
																			title : '深青色'
																		}, {
																			id : 'Red',
																			title : '辣椒红'
																		}, {
																			id : 'Purple',
																			title : '葡萄紫'
																		}, {
																			id : 'Blue',
																			title : '夜空蓝'
																		}, {
																			id : 'Yellow',
																			title : '浅褐色'
																		}, {
																			id : 'Category1',
																			title : '太上黄'
																		}, {
																			id : 'Category2',
																			title : '春天绿'
																		}, {
																			id : 'Category3',
																			title : '橘黄色'
																		}, {
																			id : 'Category4',
																			title : '草霉红'
																		}, {
																			id : 'Category5',
																			title : '亮绿色'
																		}, {
																			id : 'Category6',
																			title : '天空蓝'
																		}]
															})
												}, {
													xtype : 'fieldcontainer',
													layout : 'hbox',
													defaults : {
														labelAlign : 'right',
														labelWidth : 65,
														flex : 1
													},
													items : [{
																xtype : 'checkbox',
																fieldLabel : '显示数值',
																name : 'tf_isShowDetailNumber'
															}, {
																xtype : 'checkbox',
																fieldLabel : '提示信息',
																name : 'tf_isShowTips'
															}]

												}, {
													xtype : 'fieldcontainer',
													layout : 'hbox',
													defaults : {
														labelAlign : 'right',
														labelWidth : 65,
														flex : 1
													},
													items : [{
																xtype : 'checkbox',
																fieldLabel : '动画展示',
																name : 'tf_isAnimate'
															}, {
																xtype : 'checkbox',
																checked : true,
																fieldLabel : '定位线',
																name : 'tf_isGridLine'
															}]
												}]
									}]
						}, {
							itemId : '_chartowner',
							xtype : 'panel',
							region : 'center',
							frame : false,
							border : true,
							layout : 'fit',
							tbar : ['->', {
										xtype : 'label',
										itemId : 'titlelabel',
										text : '',
										style : 'font-size : 15px;'
									}, '->']

						}]
				this.callParent(arguments);
			},

			setFormData : function(model) {
				this.record = model;
				this.isLoadingRecord = true;
				this.down('form').loadRecord(this.record);
				this.isLoadingRecord = false;
			},

			recreateChart : function() {
				// 对于checkbox的 recordload change ,不刷新图
				if (this.isLoadingRecord == true)
					return;
				var me = this;
				var chartowner = this.down('#_chartowner');
				var form = this.down('form').getForm();

				// console.log(form.findField('tf_categoryField').getValue());
				// console.log(form.findField('tf_numericFields').getValue());
				// console.log(form.findField('tf_chartType').getValue());

				var categoryFieldName = form.findField('tf_categoryField').getValue();
				var numericFieldName = form.findField('tf_numericFields').getValue();
				var param = {
					store : this.store,
					showDetailNumber : form.findField('tf_isShowDetailNumber').getValue(),
					showTips : form.findField('tf_isShowTips').getValue(),
					animate : form.findField('tf_isAnimate').getValue(),
					theme : form.findField('tf_colorScheme').getValue(),
					grid : form.findField('tf_isGridLine').getValue(),
					margin : '10 10 10 10'
				};
				Ext.each(this.module.moduleFields, function(field) {
							if (field.tf_fieldName == categoryFieldName) {
								Ext.apply(param, {
											categoryField : field.manytoone_TitleName
													|| field.tf_fieldName,
											categoryTitle : field.tf_title.replace(new RegExp('--',
															'gm'), '')
										})
							};
						});

				// 如果选择了二个以上的数值列
				if (numericFieldName.length === 1) {

					Ext.each(this.module.moduleFields, function(field) {
								if (field.tf_fieldName == numericFieldName) {
									Ext.apply(param, {
												numericField : field.tf_fieldName,
												numericTitle : field.tf_title.replace(new RegExp('--',
																'gm'), '')
											})
								}
							});

				} else {
					var nfs = [];
					var nts = [];
					Ext.each(numericFieldName, function(name) {
								Ext.each(me.module.moduleFields, function(field) {
											if (field.tf_fieldName == name) {
												nfs.push(field.tf_fieldName);
												nts.push(field.tf_title.replace(new RegExp('--', 'gm'),
														''));

											}
										});
							})
					Ext.apply(param, {
								numericField : nfs,
								numericTitle : nts
							})
				}

				chartowner.removeAll(true);
				chartowner.add(Ext.widget(form.findField('tf_chartType').getValue(),
						param));
			}

		})